<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <script>
        var btns = document.querySelectorAll("button");
        // btns.forEach(function(btn,key){
        //     btn.onclick = function(){
        //         // 使用了key值；
        //         console.log(key);
        //     }
        // })

        // 方式一 通过let
        // for(let i=0;i<btns.length;i++){
        //     btns[i].onclick = function(){
        //         console.log(i);
        //     }
        //     // setTimeout(function(){
        //     //     console.log(i);
        //     // }, 10);
        // }



        // 二通过自执行函数
        // for (var i = 0; i < btns.length; i++) {
        //     (function (i) {
        //         btns[i].onclick = function () {
        //             console.log(i);
        //         }
        //     })(i)
        //     // setTimeout(function(){
        //     //     console.log(i);
        //     // }, 10);
        // }

        // var i = 0;
        // var i= 1 ;
        // var i =2;
        // var i = 3 


        // 三、绑定对象上
        console.time()
        for (var i = 0; i < btns.length; i++) {
                btns[i].index = i;
                btns[i].onclick = function () {
                    // console.log(i);
                    // console.log(btns[i].index);
                    // console.log(btns[i])
                    console.log( this.index);
                }
        }
        console.timeEnd();

        // var Obj = {
        //     i:1
        // }

        // var obj2 = {
        //     i:3
        // }

        // obj.i
        // obj2.i

    </script>
</body>

</html>